<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <customHeader
    title="我的"
    bg="#3FB674"
    cr="#fff"
    :br="false"
    :back="false"
    :fx="false"
  ></customHeader>

  <view class="user bg-white position-relative">
    <!-- 背景布色 -->
    <view class="bg-primary h-694rpx w-750rpx position-absolute position-top-none z-0"></view>

    <!-- 主体内容 -->
    <view class="position-relative z-9">
      <!-- <view class="text-center bg-amber w-full color-white font-size-36rpx">我的</view> -->
      <view
        class="color-white font-size-36rpx m-t-10rpx flex justify-between items-center pl-38rpx pr-60rpx"
      >
        <view class="flex justify-center items-center">
          <image
            class="w-136rpx h-136rpx"
            :src="staticUrl('/static/user/index/user-logo.png')"
            @click="toRouter({ path: '/pages/user/information/index' })"
          ></image>
          <view class="ml-10rpx">
            <view
              class="font-size-36rpx font-bold"
              @click="toRouter({ path: '/pages/common/login/index' })"
            >
              王弱弱
            </view>
            <view class="font-size-28rpx m-t-20rpx">156***12312</view>
          </view>
        </view>

        <view class="flex justify-center items-center flex-col pt-30rpx">
          <image
            class="w-44rpx h-44rpx border-rounded-5rpx"
            :src="staticUrl('/static/user/index/hym.png')"
          ></image>
          <view>
            <view class="font-size-24rpx m-t-8rpx">会员码</view>
          </view>
        </view>
      </view>

      <!-- 快捷菜单 -->
      <view class="flex justify-between items-center color-white px-48rpx mt-44rpx">
        <view>
          <image
            class="w-72rpx h-72rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhu01.png')"
          ></image>
          <view class="font-size-32rpx m-t-8rpx text-center">优惠劵</view>
          <view class="font-size-32rpx m-t-16rpx text-center">99</view>
        </view>

        <view class="w-2rpx h-37rpx translate-y-6rpx bg-white"></view>

        <view>
          <image
            class="w-72rpx h-72rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhu02.png')"
          ></image>
          <view class="font-size-32rpx m-t-8rpx text-center">余额</view>
          <view class="font-size-32rpx m-t-16rpx text-center">¥199</view>
        </view>

        <view class="w-2rpx h-37rpx translate-y-6rpx bg-white"></view>

        <view>
          <image
            class="w-72rpx h-72rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhu03.png')"
          ></image>
          <view class="font-size-32rpx m-t-8rpx text-center">积分</view>
          <view class="font-size-32rpx m-t-16rpx text-center">99</view>
        </view>

        <view class="w-2rpx h-37rpx translate-y-6rpx bg-white"></view>

        <view>
          <image
            class="w-72rpx h-72rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhu04.png')"
          ></image>
          <view class="font-size-32rpx m-t-8rpx text-center">收藏</view>
          <view class="font-size-32rpx m-t-16rpx text-center">99</view>
        </view>
      </view>

      <!-- 我的订单 -->
      <view class="myOrder color-base px-28rpx box-border mx-auto my-0 mt-24rpx">
        <view class="font-size-32rpx mt-26rpx font-bold">我的订单</view>

        <view class="flex justify-between items-center mt-14rpx">
          <view class="w-110rpx" @click="toRouter({ path: '/pages/common/default/index' })">
            <image
              class="w-56rpx h-56rpx mx-auto my-0 block"
              :src="staticUrl('/static/user/index/dd02.png')"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">待支付</view>
          </view>

          <view class="w-110rpx" @click="toRouter({ path: '/pages/common/default/index' })">
            <image
              class="w-56rpx h-56rpx mx-auto my-0 block"
              :src="staticUrl('/static/user/index/dd03.png')"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">待收货</view>
          </view>

          <view class="w-110rpx" @click="toRouter({ path: '/pages/common/default/index' })">
            <image
              class="w-56rpx h-56rpx mx-auto my-0 block"
              :src="staticUrl('/static/user/index/dd04.png')"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">待评价</view>
          </view>

          <view class="w-110rpx" @click="toRouter({ path: '/pages/common/default/index' })">
            <image
              class="w-56rpx h-56rpx mx-auto my-0 block"
              :src="staticUrl('/static/user/index/dd05.png')"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">退款/售后</view>
          </view>

          <view class="w-110rpx" @click="toRouter({ path: '/pages/common/default/index' })">
            <image
              class="w-56rpx h-56rpx mx-auto my-0 block"
              :src="staticUrl('/static/user/index/dd01.png')"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">全部</view>
          </view>
        </view>
      </view>

      <!-- 代理商入口 -->
      <view class="flex justify-between items-center mt-20rpx mx-auto w-694rpx my-0">
        <view class="w-336rpx" @click="toAgent">
          <image
            class="w-336rpx h-202rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhangmu01.png')"
          ></image>
        </view>
        <view class="w-336rpx">
          <image
            class="w-336rpx h-202rpx mx-auto my-0 block"
            :src="staticUrl('/static/user/index/zhangmu02.png')"
          ></image>
        </view>
      </view>

      <!-- 更多功能 -->
      <view class="myMore color-base bg-white px-28rpx box-border mx-auto my-0 mt-20rpx pb-24rpx">
        <view class="font-size-32rpx mt-26rpx mb-20rpx font-bold">更多功能</view>

        <view class="flex justify-between items-center flex-wrap mt-14rpx">
          <view
            class="w-110rpx moreList"
            v-for="(data, index) in state.featureMore"
            :key="index"
            @click="toRouter(data)"
          >
            <image
              v-if="data.icon"
              class="w-54rpx h-54rpx mx-auto my-0 block"
              :src="staticUrl(`/static/user/index/${data.icon}.png`)"
            ></image>
            <view class="font-size-24rpx m-t-8rpx text-center">{{ data.titile }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部菜单 -->
  <customTabbar></customTabbar>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  reactive,
  toRefs,
} from 'vue'

// reactive声明响应式数据，用于声明引用数据类型 pages/common/default/index
const state = reactive({
  featureMore: [
    { titile: '收货地址', icon: 'uz02', path: 'address/index', query: '' },
    { titile: '优惠劵', icon: 'uz03', path: '/pages/common/default/index', query: '' },
    { titile: '我的评价', icon: 'uz04', path: '/pages/common/default/index', query: '' },
    { titile: '联系客服', icon: 'uz05', path: '/pages/common/default/index', query: '' },
    { titile: '我要开店', icon: 'uz06', path: '/pages/common/default/index', query: '' },
    { titile: '推荐开店', icon: 'uz07', path: '/pages/common/default/index', query: '' },
    { titile: '骑手认证', icon: 'uz08', path: '/pages/common/default/index', query: '' },
    { titile: '设置', icon: 'uz09', path: '/pages/common/default/index', query: '' },
    { titile: '消息中心', icon: 'uz10', path: '/pages/common/default/index', query: '' },
    { titile: '身份管理', icon: 'uz11', path: '/pages/user/identity/index', query: '' },
    { titile: '新人邀约', icon: 'uz12', path: '/pages/common/default/index', query: '' },
    { titile: '', icon: '', query: '' },
  ],
})

// onMounted
onMounted(() => {
  console.log('onMounted')
})

// 跳转代理商招募页面
const toAgent = () => {
  uni.navigateTo({
    url: 'pages/user/agent/index',
  })
}

// 跳转路由
const toRouter = (data) => {
  uni.navigateTo({
    url: data.path,
  })
}
</script>

<style lang="scss">
.user {
  position: relative;
  // overflow: auto;
  color: #333;
  background: #f1f1f1;
  .myOrder {
    width: 694rpx;
    height: 216rpx;
    background: linear-gradient(180deg, #e4fff0 0%, #ffffff 100%);
    border: 2rpx solid #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .myMore {
    width: 694rpx;
    margin-bottom: 240rpx;
    overflow: hidden;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .moreList {
      margin-right: 66rpx;
      margin-bottom: 26rpx;
    }
    :nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
